<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="<%=basePath%>">
<title>代理商</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/main.css">
<link rel="stylesheet"
	href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/main.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style>
.main_div {
	min-width: 1000px
}

.pageChange {
	padding-left: 20px;
	color: #337ab7;
}

.box_content {
	height: 100px;
	padding-left: 30px
}

.pageChange {
	float: right;
	color: #337ab7;
}

.pageChange>span {
	cursor: pointer
}

.pageChange>span:hover {
	color: blue
}

table img {
	width: 60px;
	height: 50px
} 
</style>
<script>
	$(function() {
		$("#startTime").datepicker();
		$("#endTime").datepicker();
	})
</script>
</head>
<body>
	<%@ include file="header.jsp"%>
	<%@ include file="left.jsp"%>
	<div id="index"
		style="position: absolute;left: 180px;top: 80px;bottom: 0;right: 0;">
		<section id="main">
			<div class="scrollbar1-1" id="style1-1">
				<div class="main_div">
					<div class="main_title">
						<span>商品管理</span>
					</div>
					<form class="form-inline" id="detailForm" action="" method="post"
						style="margin-top: 30px;margin-left: 20px">
						<input style="display:none" value="7" id="pageCount"
							name="pageCount" />
						<div class="form-group">
							<label>商品分类:</label> <select id="selectType1"
								class="form-control"
								onclick="change1(this.value,'#selectType2');">
							</select>
						</div>
						<div class="form-group">
							<select id="selectType2" class="form-control" name="goodsType">
							</select>
						</div>
						<div class="form-group">
							<label for="orderCode"> 商品名称:</label> <input type="text"
								name="productName" class="form-control" id="productName"
								placeholder="">
						</div>
						<div class="form-group">
							<label for="ProductName"> 商品条码:</label> <input type="text"
								name="barCode" class="form-control" id="barCode" placeholder="">
						</div>
						<div class="form-group">
							<label>审核状态:</label> <select class="form-control" id="chakaVal">
								<option value="-1">请选择</option>
								<option value="0">未审核</option>
								<option value="1">通过审核</option>
								<option value="2">通过失败</option>
							</select>
						</div>
						<button onclick="selectinfo()" type="button"
							class="btn btn-primary">查询</button>
					</form>
				</div>
				<div class="force-overflow1-1">
					<table id="showtable"
						class="table table-condensed table-bordered table-hover"
						show-filter="true" style="text-align: center">
						<tr style="background-color: #59c7d2">
							<th style="text-align: center">序号</th>
							<th style="text-align: center">缩略图</th>
							<th style="text-align: center">商品名称</th>
							<th style="text-align: center">商品条码</th>
							<th style="text-align: center">商品价格</th>
							<th style="text-align: center">审核状态</th>
							<th style="text-align: center">修改</th>
						</tr>
					</table>
					<div class="pageChange">
						<span onclick="prePage()">&nbsp;&nbsp;上一页&nbsp;&nbsp;</span> <span
							onclick="nextPage()">&nbsp;&nbsp;下一页&nbsp;&nbsp;</span> <em>
							&nbsp; 第&nbsp;<span id="pageNum">1</span>&nbsp;页&nbsp;&nbsp;
						</em> <em>/&nbsp;&nbsp;共&nbsp;<span id="totalpage"></span>&nbsp;页
						</em> <em>&nbsp;&nbsp;&nbsp;跳到第<input id="searchInput"
							style="width:46px" maxlength="4" type="text">页
						</em>
						<button class="btn btn-primary" onclick="searchPage()">搜索</button>
					</div>
				</div>
			</div>
		</section>
		<section id="motai" style="display:none">

			<div class="scrollbar1-1" id="style1-1">
				<div class="main_div">
					<div class="main_title">
						<span>录入商品</span>
					</div>
					<form class="form-horizontal" id="uploadForm"
						style="margin-top: 30px" method="post">
						<div class="form-group">
							<label for="inputEmail1" class="col-xs-1 control-label">商品分类</label>
							<div class="col-xs-2">
								<select id="select1" class="col-xs-12"
									onclick="change1(this.value,'#select2');">
								</select>
							</div>
							<div class="col-xs-2">
								<select id="select2" class="col-xs-12" name="goodsType">
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-1 control-label">商品名称</label>
							<div class="col-xs-3">
								<input type="text" style="display: none;"> <input
									type="text" name="productName" class="form-control"
									id="productName2" placeholder="商品名称">
							</div>
							<label maxlength="50" class="col-xs-2 control-label"
								style="text-align:left;color:#ccc;">请输入正确的商品名称</label>
						</div>
						<div class="form-group">
							<label class="col-xs-1 control-label">商品条码</label>
							<div class="col-xs-3">
								<input type="text" onblur="sureCard();" name="barCode"
									class="form-control" id="productCard2" placeholder="商品条码">
							</div>
							<label id="sureCard2" class="col-xs-2 control-label"
								style="text-align:left;color:#ccc">请输入正确并且唯一的商品条码</label>
						</div>
						<div class="form-group">
							<label class="col-xs-1 control-label">商品价格</label>
							<div class="col-xs-3">
								<input type="text" name="referenceValue" onblur="surePrice1();"
									class="form-control" id="productPrice2" placeholder="商品价格">
							</div>
							<label id="surePrice2" class="col-xs-2 control-label"
								style="text-align:left;color:#ccc">请输入正确的商品价格</label>
						</div>
						<div class="form-group">
							<label class="col-xs-1 control-label">略缩图:</label>
							<div class="col-xs-3">
								<input type="file" id="productFile" name="file"
									onchange="selectImage(this);" /> <img id="image"
									style="width:105px;height:105px" src="" />
							</div>
							<label class="col-xs-2 control-label"
								style="text-align: left;color: #ff6c29">*必须上传略缩图（建议大小为210*210像素）</label>
						</div>
						<div class="form-group">
							<label class="col-xs-1 control-label">商品图片:</label>
							<div class="col-xs-3">
								<input type="file" id="productFile2" name="bigFile"
									onchange="selectImage2(this);" /> <img id="image2"
									style="width:375px;height:375px" src="" />
							</div>
							<label class="col-xs-4 control-label"
								style="text-align: left;color: #ff6c29">*必须上传商品图片（建议大小为750*750像素）</label>
						</div>
						<div class="form-group">
							<label class="col-xs-1 control-label">商品详情图片：</label>
							<div class="col-xs-3">
								<input type="file" id="detailFile" name="detailFile"
									onchange="selectImage3(this);"> <img id="image3"
									style="width:375px;" src="" />
							</div>
							<label class="col-xs-5 control-label"
								style="text-align: left;color: #ff6c29">*必须上传商品详情图片（建议宽度为750像素）</label>
						</div>

						<div class="form-group">
							<label class="col-xs-1 control-label">商品介绍</label>
							<div class="col-xs-4">
								<textarea class="col-xs-12" rows="5" id="productDetail"
									name="productDetail"></textarea>
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-4 col-xs-offset-2">
								<input class="col-xs-4 btn btn-primary" value="提交审核"
									onclick="submitProduct()" /><input id="productIDS" name="id"
									style="display:none" />
							</div>
						</div>

					</form>

				</div>

			</div>
		</section>
		<script type="text/javascript">
			$(function() {
				//数据库加载商品分类
				$.post(urls + "superMarketAction/getGoodsType",
					function(data) { //data 为list
						//循环list 取其属性值
						$.each(data, function(n, GoodsType) {
							$("#select1").append("<option value=" + n + ">" + GoodsType.goodsName + "</option>");
						})
						change1(0, "#select2")
					}
				);
			})
			var image = '';
			function selectImage(file) {
				if (!file.files || !file.files[0]) {
					return;
				}
				var reader = new FileReader();
				reader.onload = function(evt) {
					document.getElementById('image').src = evt.target.result;
					image = evt.target.result;
				};
				reader.readAsDataURL(file.files[0]);
			}
			function selectImage2(file) {
				if (!file.files || !file.files[0]) {
					return;
				}
				var reader = new FileReader();
				reader.onload = function(evt) {
					document.getElementById('image2').src = evt.target.result;
					image = evt.target.result;
				};
				reader.readAsDataURL(file.files[0]);
			}
			function selectImage3(file) { //显示图片
				if (!file.files || !file.files[0]) {
					return;
				}
				var reader = new FileReader();
				reader.onload = function(evt) {
					document.getElementById('image3').src = evt.target.result;
					image = evt.target.result;
				};
				reader.readAsDataURL(file.files[0]);
			}
			function sureCard() {
				var card = /^\d{1,20}$/;
				var productCard = $("#productCard2").val();
				if (!card.test(productCard)) {
					$("#sureCard2").text("请输入1到20位数字").css("color", "red")
					$("#productCard2").val("")
				} else {
					$("#sureCard2").text("")
				}
			}
			function surePrice1() {
				var price = /^(0|[1-9][0-9]{0,5})(\.[0-9]{1,2})?$/;
				var productPrice = $("#productPrice2").val();
				if (!price.test(productPrice)) {
					$("#surePrice2").text("请输入正确的价格，小数点以后不能超过两位").css("color", "red");
					$("#productPrice2").val("")
				} else {
					$("#surePrice2").text("")
				}
			}
			
			function submitProduct() {
				if ($("#productCard2").val()) {
					if ($("#productPrice2").val()) {
						if ($("#productName2").val()) {
							if ($("#select2").find("option").val()) {
								/********************用于判断图片大小以及图片名称是否合法******************/
								var aarr = document.getElementsByTagName("input");
								var barr = [];
								var picreg = /^[A-Za-z0-9\._]{1,100}$/; //图片名称正则
								var flag1 = false; //用于判断图片大小
								var flag2 = false; //用于判断图片名称
								for (var i = 0; i < aarr.length; i++) {
									if (aarr[i].type == "file") {
										barr.push(aarr[i])
									}
								}
								for (var z = 0; z < barr.length; z++) {
									if (barr[z].files.length == 0) {
									} else {
										if (barr[z].files[0].size > 204800) { //判断图片大小是否大于200kb
											flag1 = true;
										}
										if (!picreg.test(barr[z].files[0].name)) { //判断图片大小是否大于200kb
		
											flag2 = true;
										}
									}
								}
								if (flag1) {
									alert("上传图片不得超过200kb每张");
									return;
								}
								if (flag2) {
									alert("图片名称只能由字母与数字组成");
									return;
								}
								/******************用于判断图片大小以及图片名称是否合法****************/
								$.ajax({
									url : urls + "productaAction/updateHeadProduct",
									type : 'POST',
									cache : false,
									data : new FormData($('#uploadForm')[0]),
									processData : false,
									contentType : false
								}).done(function(res) {
									if (res) {
										alert("提交成功")
										$("#motai").css("display", "none");
										$("#main").css("display", "block");
										selectinfo()
									} else {
										alert("提交失败")
									}
								}).fail(function(res) {});
							} else {
								alert("请输入商品分类")
							}
						} else {
							alert("请输入商品名称")
						}
					} else {
						alert("请输入商品价格")
					}
				} else {
					alert("请输入商品条形码")
				}
			}
		</script>

	</div>
	<script>
		$(function() {
			selectinfo()
		})
		function selectinfo() {
			var barCode = $("#barCode").val();
			var pageNum = $("#pageNum").html();
			var pageCount = $("#pageCount").val();
			var productName = $("#productName").val();
			var chackaVal = $("#chakaVal").find("option:selected").val();
			var selectType2 = $("#selectType2").find("option:selected").val()
			if (productName == "") {
				productName = null;
			}
			if (barCode == "") {
				barCode = null;
			}
			if (!selectType2) {
				selectType2 = null
			}
			if (chackaVal == -1) {
				chackaVal = null
			}
			$.post(urls + "productaAction/showProducts",
				{
					agentId : localStorage.getItem("agentid"),
					goodsType : selectType2,
					barCode : barCode,
					pageNum : pageNum,
					pageCount : pageCount,
					productName : productName,
					checka : chackaVal
				},
				function(data) {
					if (data) {
						var totalpage = data.totalpage;
						var orderlist = data.headlist;
						var table = $("#showtable");
						$("tr").remove(".addtr");
						for (var i = 0; i < orderlist.length; i++) {
							var checka;
							if (orderlist[i].checka == 0) {
								checka = "未审核";
							} else if (orderlist[i].checka == 1) {
								checka = "通过审核";
							} else if (orderlist[i].checka == 2) {
								checka = "通过失败";
							}
							var append = "<tr class='addtr'><td>" + (i + 1) + "</td>" +
								"<td ><img src='/goods/" + orderlist[i].productSimg + "' alt='加载中'/> </td>" +
								"<td>" + orderlist[i].productName + "</td>" +
								"<td>" + orderlist[i].barCode + "</td>" +
								"<td>" + orderlist[i].referenceValue + "</td>" +
								"<td>" + checka + "</td>" +
								"<td><input onclick='detailinfo(\"" +
								orderlist[i].productSimg + "|$" +
								orderlist[i].productName + "|$" +
								orderlist[i].barCode + "|$" +
								orderlist[i].referenceValue + "|$" +
								orderlist[i].productDetail + "|$" +
								orderlist[i].id + "|$" +
								orderlist[i].productBimg + "|$" +
								orderlist[i].detailImg +
								"\")' type='button' class='btn btn-primary' value='修改' /></td></tr>";
							table.append(append);
						}
						$("#totalpage").html(totalpage);
					}
				}
				, "json"
			)
		}
		
		function detailinfo(e) { //点击修改
			$("#motai").css("display", "block");
			$("#main").css("display", "none");
			var attr = e.split("|$");
			$("#image").attr("src", "/goods/" + attr[0]);
			$("#image2").attr("src", "/goods/" + attr[6]);
			$("#image3").attr("src", "/goods/" + attr[7]);
			$("#productName2").val(attr[1]);
			$("#productCard2").val(attr[2]);
			$("#productPrice2").val(attr[3]);
			$("#productDetail").val(attr[4]);
			$("#productIDS").val(attr[5]);
		}function motaiHidden() {
			$("#motai").css("display", "none")
		}
	</script>
</body>
</html>